<template>
  <n-config-provider :theme="getThemeConfig.theme ? darkTheme : null">
    <n-layout class="wh100 absolute-box bigbg" id="show-box">
      <n-el tag="div" style="height: 7%">
        <hz-top2>音乐节售票系统数据大屏</hz-top2>
        <n-el tag="div" style="display: flex;justify-content: flex-end;margin-top: -40px;margin-right: 20px">
          <n-button @click="toBuy" style="margin-right: 20px;">我要购票</n-button>
          <n-button @click="toIndex">数据管理</n-button>
        </n-el>
      </n-el>
      <n-card style="width: 820px;height: 420px;left: 600px;top: 90px;z-index: 1" class="absolute-box drag-box"
        bordered="false">
        <hz-title2>热门推荐</hz-title2>

      </n-card>
      <n-card v-for="(item, index) in show_com" :key="index" :style="{
    left: item.position.x + 'px',
    top: item.position.y + 'px',
    width: item.position.w + 'px',
    height: item.position.h + 'px',
  }" class="absolute-box drag-box" :id="item.id" :bordered="false">
        <component :is="item.component.com" :id="item.component.id" :ref="setRef" :show-title="true"
          :api-path="item.apiOption.apiPath" :method="item.apiOption.method" :type="item.apiOption.type"
          :params="item.apiOption.params"></component>
      </n-card>
    </n-layout>
  </n-config-provider>
</template>

<script setup lang="ts">

import { darkTheme } from "naive-ui";
// @ts-ignore
import { useThemeConfig } from "/@bean/GlobalConfig";
import { computed } from "vue";
import { DragData } from "/@bean/GlobalEntity";
import { getHzCom } from "/@utils/GlobalFunction";
import configjs from "/@/pages/bigscreen/config.json";
import { loadEchartsData } from "/@api/hz-bigscreen-api";
import HzEchartsScatterSimple from "/@com/echarts/scatter/Hz-Echarts-Scatter-Simple.vue";
import HzBox2 from "/@com/hz-box/Hz-Box-2.vue";
import HzEchartsBarSimple from "/@com/echarts/bar/Hz-Echarts-Bar-Simple.vue";
// @ts-ignore
import result from '/@utils/Axios.ts'

function toIndex() {
  window.location.href = 'http://localhost:8080/'// 跳转后台管理
}
function toBuy() {
  window.location.href = 'http://localhost:8080/IsbuyTickets' //跳转购票
}

// 画布的宽高
const canvas = ref({
  width: 1920,
  height: 963
})
// 拖拽的偏移量
const dragOffset = ref({
  x: 0,
  y: 0,
  absX: 2,
  absY: 2
})
const recommendData = ref([
  {
    id: 84,
    city: "深圳",
    type: "流行",
    icon: "//img.alicdn.com/tfs/TB1S_dkRQvoK1RjSZFNXXcxMVXa-270-364.png",
    title: "时过夏末“君玉”深圳专场",
    link: "https://detail.damai.cn/item.htm?id=759097404979&clicktitle=%E6%97%B6%E8%BF%87%E5%A4%8F%E6%9C%AB%E2%80%9C%E5%90%9B%E7%8E%89%E2%80%9D%E6%B7%B1%E5%9C%B3%E4%B8%93%E5%9C%BA",
    date: "2024-01-20周六13:30",
    changci: "2024-01-20周六13:30",
    changguan: "深圳市|深圳HOULIVE下沙店",
    piaodang: "单人预售150.0元",
    price: 150.0,
    xiangou: "每笔订单限购6张",
    times: "约90分钟（以现场为准）",
    actor: "以现场为准",
  },
  {
    id: 198,
    city: "重庆",
    type: "流行",
    icon: "//img.alicdn.com/tfs/TB1S_dkRQvoK1RjSZFNXXcxMVXa-270-364.png",
    title: "星耀万州·2024新年演唱会",
    link: "https://detail.damai.cn/item.htm?id=753409528901&clicktitle=%E6%98%9F%E8%80%80%E4%B8%87%E5%B7%9E%C2%B72024%E6%96%B0%E5%B9%B4%E6%BC%94%E5%94%B1%E4%BC%9A",
    date: "2024-01-20周六19:00",
    changci: "2024-01-20周六19:00",
    changguan: "重庆市|重庆万州体育中心体育场",
    piaodang: "看台299元",
    price: null,
    xiangou: null,
    times: "以现场为准",
    actor: "23"
  },
  {
    id: 262,
    city: "上海",
    type: "音乐节",
    icon: "//img.alicdn.com/tfs/TB1S_dkRQvoK1RjSZFNXXcxMVXa-270-364.png",
    title: "【5折】《We Will Rock You》纪念皇后乐队Queen 金曲演唱会",
    link: "https://detail.damai.cn/item.htm?id=752235648744&clicktitle=%E3%80%905%E6%8A%98%E3%80%91%E3%80%8AWe%20Will%20Rock%20You%E3%80%8B%E7%BA%AA%E5%BF%B5%E7%9A%87%E5%90%8E%E4%B9%90%E9%98%9FQueen%20%E9%87%91%E6%9B%B2%E6%BC%94%E5%94%B1%E4%BC%9A",
    date: null,
    changci: null,
    changguan: null,
    piaodang: null,
    price: null,
    xiangou: null,
    times: "约90分钟（以现场为准）",
    actor: "5"
  },
  {
    id: 226,
    city: "南京",
    type: "livehouse",
    icon: "//img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01JcJDuT2GdSYR9m2hH_!!2251059038.jpg_q60.jpg_.webp",
    title: "2024 坤音Q跨九天狂龙迎春晚会",
    link: "https://detail.damai.cn/item.htm?id=758813965438&clicktitle=2024%20%E5%9D%A4%E9%9F%B3Q%E8%B7%A8%E4%B9%9D%E5%A4%A9%E7%8B%82%E9%BE%99%E8%BF%8E%E6%98%A5%E6%99%9A%E4%BC%9A",
    date: null,
    changci: null,
    changguan: "南京市|江苏省五台山体育中心双沟珍宝坊体育馆",
    piaodang: null,
    price: null,
    xiangou: null,
    times: "约150分钟（以现场为准）",
    actor: "ONER（岳岳/木子洋/灵超）等"
  },
  {
    id: 202,
    city: "重庆",
    type: "livehouse",
    icon: "//img.alicdn.com/tfs/TB1S_dkRQvoK1RjSZFNXXcxMVXa-270-364.png",
    title: "积木绿岛「丛林出发」2024 四城巡演",
    link: "https://detail.damai.cn/item.htm?id=763094929308&clicktitle=%E7%A7%AF%E6%9C%A8%E7%BB%BF%E5%B2%9B%E3%80%8C%E4%B8%9B%E6%9E%97%E5%87%BA%E5%8F%91%E3%80%8D2024%20%E5%9B%9B%E5%9F%8E%E5%B7%A1%E6%BC%94",
    date: "2024-01-20周六20:00",
    changci: "2024-01-20周六20:00",
    changguan: "重庆市|MODERNSKYLAB重庆",
    piaodang: "预售票38.0元",
    price: 38.0,
    xiangou: "每笔订单限购6张",
    times: "约90分钟（以现场为准）",
    actor: "90分钟"
  },
  {
    id: 105,
    city: "重庆",
    type: "livehouse",
    icon: "//img.alicdn.com/tfs/TB1S_dkRQvoK1RjSZFNXXcxMVXa-270-364.png",
    title: "点亮星辰2024群星演唱会·开州站",
    link: "https://detail.damai.cn/item.htm?id=763133654734&clicktitle=%E7%82%B9%E4%BA%AE%E6%98%9F%E8%BE%B02024%E7%BE%A4%E6%98%9F%E6%BC%94%E5%94%B1%E4%BC%9A%C2%B7%E5%BC%80%E5%B7%9E%E7%AB%99",
    date: null,
    changci: null,
    changguan: "重庆市|重庆市开州区体育场",
    piaodang: null,
    price: null,
    xiangou: null,
    times: "以现场为准",
    actor: "李克勤、胡彦斌、动力火车、程响、耿斯汉"
  },
  {
    id: 24,
    city: "广州",
    type: "livehouse",
    icon: "//img.alicdn.com/tfs/TB1S_dkRQvoK1RjSZFNXXcxMVXa-270-364.png",
    title: "布志纶觅·光之道巡回演唱会-FINAL广州站",
    link: "https://detail.damai.cn/item.htm?id=757589461573&clicktitle=%E5%B8%83%E5%BF%97%E7%BA%B6%E8%A7%85%C2%B7%E5%85%89%E4%B9%8B%E9%81%93%E5%B7%A1%E5%9B%9E%E6%BC%94%E5%94%B1%E4%BC%9A-FINAL%E5%B9%BF%E5%B7%9E%E7%AB%99",
    date: "2024-01-20周六20:00",
    changci: "2024-01-20周六20:00",
    changguan: "广州市|广州媒棚LIVE",
    piaodang: "388元",
    price: 388.0,
    xiangou: "每笔订单限购6张",
    times: "约90分钟（以现场为准）",
    actor: "90分钟"
  }
])

// 弹窗消息
let message = useMessage();
// 显示的组件
const show_com = ref([] as DragData[])

const storesThemeConfig = useThemeConfig();
// @ts-ignore
const { themeConfig } = storeToRefs(storesThemeConfig);
const getThemeConfig = computed(() => {
  return themeConfig.value;
});

const refs = ref([] as any[])
const setRef = (e: any) => {
  console.log('ref', e)
  refs.value.push(e)
}

// 计时器组
const timer = ref([] as any[])

// 生命周期 页面创建前
onBeforeMount(() => {
  initShowCom()
})
function getRecommend() {
  return result({
    url: '/api/bigscreen/getRecommendContent',
    method: 'get'
  })
}

// 生命周期 页面创建后
onMounted(() => {
  // 设置页面整体的缩放比例
  const scale = Math.min(window.innerWidth / canvas.value.width, window.innerHeight / canvas.value.height)
  //@ts-ignore
  document.body.style.zoom = scale.toString()
  // 遍历show_com中的组件 初始化数据 及 创建定时器
  show_com.value.forEach((item: any) => {
    // 如果apiPath不为空且params不为true就获取数据
    if (item.apiOption.apiPath !== '' && !item.apiOption.params) {
      getEchartsDataByParams(item.component.id, null)
    }
    // *****如果需要携带请求参数，则自定义参数*****
    if (item.apiOption.params && !item.component.update) {
      getDataByParams(item.component.id)
    }
    if (item.apiOption.params && item.component.update) {
      // 如果需要定时携带参数更新，就添加定时器调用getDataByParams
      timer.value.push(setInterval(() => {
        getDataByParams(item.component.id)
      }, item.component.updateTime))
    } else if (item.component.update && !item.apiOption.params) {
      timer.value.push(setInterval(() => {
        getEchartsDataByParams(item.component.id, null)
      }, item.component.updateTime))
    }
  })
  // 获取热门推荐数据
  getRecommend().then((res: any) => {
    console.log(res)
  })
})

// 监听窗口变化
window.addEventListener('resize', () => {
  // 设置页面整体的缩放比例
  const scale = Math.min(window.innerWidth / canvas.value.width, window.innerHeight / canvas.value.height)
  //@ts-ignore
  document.body.style.zoom = scale.toString()
})


const initShowCom = () => {
  // 获取configjs中的数据
  const config = configjs
  // 遍历config
  config.forEach((item: any) => {
    // 将组件添加到show_com中
    show_com.value.push({
      id: item.id,
      position: item.position,
      component: {
        id: item.component.id,
        com: shallowRef(getHzCom(item.component.name)),
        name: item.component.name,
        update: item.component.update,
        updateTime: item.component.updateTime,
      },
      apiOption: {
        apiPath: item.apiOption.apiPath,
        type: item.apiOption.type,
        method: item.apiOption.method,
        params: item.apiOption.params
      }
    })
  })
}

// 携带参数的通用更新方法
const getEchartsDataByParams = async (name: string, params: any) => {
  // 从ref中找到对应的组件
  const echart = refs.value.find((item: any) => item.$props.id === name)
  // 封装请求参数
  const query = {
    ...params
  }
  // 更新图表
  await echart.refreshChartsByApi(query)
}

// ******************对图表组件自定义请求参数************
function getDataByParams(name: string) {
  switch (name) {
    case 'com0':
      // 封装你的请求参数
      const params = { //样例
        name: '张三',
        age: 18
      }
      // 调用更新方法
      getEchartsDataByParams(name, params)
      break
    default: // 弹窗提示
      message.warning(name + '组件没有自定义请求参数')
      break
  }
}

const testGetData = async () => {
  // 等待1秒返回数据
  const s = await new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {
        title: '柱状图111',
        data: [
          { value: Math.random() * 1000, name: '搜索引擎' },
          { value: Math.random() * 1000, name: '直接访问' },
          { value: Math.random() * 1000, name: '邮件营销' },
          { value: Math.random() * 1000, name: '联盟广告' },
          { value: Math.random() * 1000, name: '视频广告' }
        ]
      }
      resolve(data)
    }, 1000)
  })
  return s
}

</script>

<style scoped>
.absolute-box {
  position: absolute;
}

.drag-box {
  z-index: 1;
  background: rgba(255, 255, 255, 0);
}

.bigbg {
  background: url("/src/assets/bigbg.jpg") no-repeat;
  background-size: 100% 100%;
}
</style>
